<template>
	<div class="nav">
		<div class="left" @click="navClick(-1)"><p>&lt;</p></div>
		<div class="right" @click="navClick(1)"><p>&gt;</p></div>
	</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { routes } from "../router";
import { useRouter } from "vue-router";

export default defineComponent({
	name: "app-nav",

	setup() {
		const router = useRouter();
		function navClick(v: number) {
			const len = routes.length;
			const id = router.currentRoute.value.meta.id as number;

			let i = id + v;
			if (i < 0) {
				i = len - 1;
			}

			if (i >= len) {
				i = 0;
			}

			router.push({ name: routes[i].name });
		}

		return { navClick };
	},
});
</script>

<style lang="less">
.nav {
	.left {
		position: absolute;
		left: 0px;
		top: 50%;
		background-color: grey;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10px;
		cursor: pointer;
		p {
			color: white;
			text-align: center;
			margin: 0px;
			font-weight: bolder;
			font-size: 1.25em;
			user-select: none;
		}
	}
	.right {
		position: absolute;
		right: 0px;
		top: 50%;
		background-color: grey;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10px;
		cursor: pointer;
		p {
			color: white;
			text-align: center;
			margin: 0px;
			font-weight: bolder;
			font-size: 1.25em;
			user-select: none;
		}
	}
}
</style>
